<template>
  <div>
    <div>
      <H3>衣服：{{ properties.衣服ID }}</H3>
    </div>
    <div><label>当前状态：</label> {{ properties.当前状态 }}</div>
    <div><label>经度：</label> {{ properties.经度 }}</div>
    <div><label>纬度：</label> {{ properties.纬度 }}</div>
    <div><label>购买人：</label> {{ properties.购买人 }}</div>
    <div><label>联系电话：</label> {{ properties.联系电话 }}</div>
    <div><label>所在地址：</label> {{ properties.所在地址 }}</div>
    <div class="button-group">
      <input
        type="button"
        class="tk-button"
        value="显示轨迹"
        @click="showTrack"
      />
      <input
        type="button"
        class="tk-button"
        value="清除轨迹"
        @click="clearTrack"
      />
    </div>
  </div>
</template>

<script>
import tracks from "@/assets/points.json";
import * as maptalks from "maptalks";

export default {
  name: "PopWindow",
  props: {
    properties: {
      type: Object,
    },
  },
  created() {
    if(!window.trackLayer ){
      window.trackLayer = new maptalks.VectorLayer("line_vector").addTo(window.map);
    }

  },
  mounted() {

  },
  methods: {
    showTrack() {
      const trackPoints = tracks[this.properties.衣服ID];
      console.info("trackpoints", trackPoints);
      if(!trackPoints){
          alert('未找到轨迹')
      }else{
          new maptalks.LineString(trackPoints, {
              smoothness: 0.5,
              symbol: this.getSymbol(),
          })
              .addTo(window.trackLayer);
      }

    },
    clearTrack() {
      window.trackLayer.clear();
    },
    getSymbol() {
      return [
        {
          lineColor: "#FF0000",
          lineWidth: 3,
        },
        {
          markerType: "ellipse",
          markerWidth: 8,
          markerHeight: 8,
          markerFill: "#FFFF00",
          markerPlacement: "vertex",
        },
      ];
    },
  },
};
</script>

<style scoped>
.button-group {
  text-align: right;
  margin: 5px;
}
.tk-button {
  margin-left: 10px;
}
</style>
